<template>
  <div class="mx-auto mb-5 box-border w-[90%] rounded-xl bg-[#23282a] px-5 pb-3 text-xs text-[#fff] lg:w-full">
    <p class="py-5 font-[500]">{{ $mt('Related Items') }}</p>
    <div class="grid grid-cols-1 gap-y-3 pb-3" v-if="recommendGoodsList.length">
      <NuxtLink
        external
        class="flex items-center"
        :to="$localePath(`/goods/${item.urlName || item.id}`)"
        v-for="item in recommendGoodsList"
        :key="item.id">
        <y-image class="mr-2.5 rounded-xl" :src="$withPicOrigin(item.smallIcon)" width="48px" height="48px" />
        <div>
          <h2 class="mb-1 font-[500]">{{ item.name }}</h2>
          <h3 class="text-[#929495]">{{ item.areaCode }}</h3>
        </div>
      </NuxtLink>
    </div>
    <van-empty v-else image="/v2/home-imgs/empty2.png" description="nothing here" />
  </div>
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'
import { useGoodsStore } from '~/store/goods'
import CommonEmpty from '~/components/basis/CommonEmpty.vue'

const goodsStore = useGoodsStore()
const { recommendGoodsList } = storeToRefs(goodsStore)
</script>

<style lang="scss"></style>
